<template>
  <div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-4xl mx-auto">
      <h1 class="text-3xl font-bold text-gray-900 mb-8">Markdown渲染测试</h1>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 输入区域 -->
        <div class="bg-white rounded-lg shadow p-6">
          <h2 class="text-xl font-semibold mb-4">Markdown输入</h2>
          <textarea
            v-model="markdownText"
            class="w-full h-96 p-4 border border-gray-300 rounded-lg font-mono text-sm"
            placeholder="输入Markdown文本进行测试..."
          ></textarea>
        </div>
        
        <!-- 渲染结果 -->
        <div class="bg-white rounded-lg shadow p-6">
          <h2 class="text-xl font-semibold mb-4">渲染结果</h2>
          <div class="h-96 overflow-y-auto border border-gray-200 rounded-lg p-4">
            <MarkdownRenderer :content="markdownText" />
          </div>
        </div>
      </div>
      
      <!-- 预置示例 -->
      <div class="mt-8 bg-white rounded-lg shadow p-6">
        <h2 class="text-xl font-semibold mb-4">预置示例</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <button
            v-for="(example, index) in examples"
            :key="index"
            @click="markdownText = example.content"
            class="p-4 border border-gray-300 rounded-lg hover:bg-gray-50 text-left"
          >
            <h3 class="font-medium text-gray-900">{{ example.title }}</h3>
            <p class="text-sm text-gray-600 mt-1">{{ example.description }}</p>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MarkdownRenderer from '../components/MarkdownRenderer.vue'

const markdownText = ref(`# 恋爱建议指南

你好！我是你的恋爱大师，专注于帮助大家解决感情困扰。

## 主要服务内容

### 1. 恋爱技巧指导
- **如何表白**: 选择合适的时机和方式
- **约会建议**: 创造浪漫难忘的约会体验
- **沟通技巧**: 学会倾听和表达

### 2. 情感问题解答
- 单身如何认识新朋友或表达好感？
- 恋爱中怎么解决沟通不畅或者盾？
- 已婚如何平衡家庭责任或处理亲关系？

### 3. 个人提升建议
1. **拓展社交圈**：积极参与各类社交活动
2. **提升自身魅力**：在外在形象上保持良好
3. **线上交友**：完善真实且有吸引力的个人资料
4. **观察与评估**：在与潜在对象接触时，观察其言行举止

## 常见问题

> 问：如何知道对方是否对我有意思？
> 答：观察对方的肢体语言、回复频率和主动性。

---

记住：**真诚**是最好的恋爱技巧！

\`\`\`javascript
// 代码示例
function showLove() {
  return "用心去爱，真诚相待";
}
\`\`\`

希望我的建议能帮助到你！💕`)

const examples = ref([
  {
    title: '基础格式',
    description: '标题、加粗、斜体、行内代码',
    content: `# 大标题
## 中标题  
### 小标题

这是**加粗文本**和*斜体文本*。

这是\`行内代码\`示例。`
  },
  {
    title: '列表和引用',
    description: '无序列表、有序列表、引用',
    content: `## 无序列表
- 第一项
- 第二项
- 第三项

## 有序列表
1. 步骤一
2. 步骤二
3. 步骤三

> 这是一个引用文本
> 可以跨多行`
  },
  {
    title: '流式数据测试',
    description: '模拟SSE分段传输的Markdown',
    content: `要找到合适的对象，可以从以下几个方面入手：

1. **拓展社交
圈**：积极参与各类社交活动，如朋友聚会、兴趣小组、行业交流会等。

2. **提升自身魅力**：在外在形象上，保持良好的个人卫生，选择适合自己身材与风格的着装。

3. **线上交友**：完善真实且有吸引力的个人资料，照片选择清晰、展现个人特色的。

4. **观察与评估**：在与潜在对象接触时，观察其言行举止是否尊重他人。

通过以上方法，你可以增加认识新朋友的机会！😊`
  },
  {
    title: '代码和分割线',
    description: '代码块、分割线',
    content: `## 代码块示例

\`\`\`javascript
function hello() {
  console.log("Hello World!");
}
\`\`\`

---

这是分割线上方的内容

***

这是另一种分割线下方的内容`
  }
])
</script>

<style scoped>
/* 组件专用样式 */
</style> 